﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>TreeView - Even/Odd Items</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.treeview.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treeview.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "$timeout", "IntegralUITreeViewService", function($scope, $timeout, $treeService){
				$scope.treeName = "treeSample";
				$scope.itemIcon = "icons-medium empty-doc";

				$scope.ctrlStyle = {
					item: {
						content: 'item-content'
					}
				}

				var evenItemStyle = {
					general: {
						normal: 'even-item',
						hovered: 'even-item',
						selected: 'even-item-selected'
					}
				}

				var oddItemStyle = {
					general: {
						normal: 'odd-item',
						hovered: 'odd-item',
						selected: 'odd-item-selected'
					}
				}

				$scope.items = [
					{ 
						id: 1,
						text: "Favorites",
						icon: "icons-medium favorites",
						items: [
							{ id: 11, pid: 1, text: "Desktop" },
							{ id: 12, pid: 1, text: "Downloads", icon: "icons-medium downloads" }
						]
					},
					{ 
						id: 2,
						text: "Libraries",
						icon: "icons-medium folder",
						items: [
							{ 
								id: 21, 
								pid: 2, 
								text: "Documents", 
								icon: "icons-medium documents",
								expanded: false,
								items: [
									{ id: 211, pid: 21, text: "My Documents" },
									{ id: 212, pid: 21, text: "Public Documents" }
								]
							},
							{ id: 22, pid: 2, text: "Music", icon: "icons-medium music-note" },
							{ id: 23, pid: 2, text: "Pictures", icon: "icons-medium pictures" },
							{ id: 24, pid: 2, text: "Videos", icon: "icons-medium videos" }
						]
					},
					{ 
						id: 3,
						text: "Computer",
						icon: "icons-medium pc",
						expanded: false,
						items: [
							{ id: 31, pid: 3, text: "Local Disk (C:)", icon: "icons-medium disk" },
							{ id: 32, pid: 3, text: "Storage (D:)", icon: "icons-medium disk" }
						]
					},
					{ id: 4, text: "Network", icon: "icons-medium network" },
					{ id: 5, text: "Recycle Bin", icon: "icons-medium recycle" }
				];

				var initTimer = $timeout(function(){
					$treeService.selectedItem($scope.treeName, $scope.items[1].items[0]);
					updateAppearance();

					$timeout.cancel(initTimer);
				}, 1);

				var updateAppearance = function(){
					var updateTimer = $timeout(function(){
						var list = $treeService.getList($scope.treeName, null, true);
						for (var i = 0; i < list.length; i++)
							list[i].style = i % 2 == 0 ? evenItemStyle : oddItemStyle;

						$treeService.refresh($scope.treeName);

						$timeout.cancel(updateTimer);
					}, 1);
				}

				$scope.onAfterExpand = function(e){
					updateAppearance();
				}

				$scope.onAfterCollapse = function(e){
					updateAppearance();
				}
			}]);
    </script>
    <style type="text/css">
    	.item-content
    	{
    		background: transparent;
    	}
		.even-item
		{
			background: #f5f5f5;
		}
		.even-item-selected
		{
			background: #f5f5f5;
			font-weight: bold;
		}
		.odd-item
		{
			background: #e1e1e1;
		}
		.odd-item-selected
		{
			background: #e1e1e1;
			font-weight: bold;
		}
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">TreeView / Even-Odd Items</h2>
	        <div class="feature-content">
	            <div style="display:inline-block">
	                <iui-treeview name="{{treeName}}" class="directive" items="items" control-style="ctrlStyle" item-icon="itemIcon" after-expand="onAfterExpand(e)" after-collapsed="onAfterCollapse(e)"></iui-treeview>
                    <br style="clear:both;"/>
                </div>
                <div class="feature-help" style="margin:0">
                    <p><span class="initial-space"></span>An example of TreeView with items displayed in alternate colors.</p>
                    <p><span class="initial-space"></span>Each item can have a unique look. This is done by setting custom CSS class to the style of specific item. In case of this sample, we want to have even items in same color, and different color for odd items. This is done by creating two custom CSS classes which will be applied to even or odd items, accordingly to their order.</p>
                    <p><span class="initial-space"></span>We are using a list of currently visible items to apply style changes. And because this list doesn't include child items of collapsed parent item, whenever item is expanded or collapsed, the appearance is updated. By handling afterExpand and afterCollapsed events, we can update their appearance, so that even/odd item look is sustained.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
